<template>
  <div class="audio_bg" :style="{height: H + 'px'}">
    <img :src="getVideoData.picUrl" style="object-fit: contain;width: 100%"/>
    <div @click="startPlayAudio" class="status_audio">
      <img :src="isPlayAudio?'/web-hft-ee/static/img/player_icon.png':'/web-hft-ee/static/img/playicon.png'">
    </div>
    <div class="function_area">
      <van-slider v-model="audioPercentage" active-color="#1989fa" @change="touchEvent">
        <template #button>
          <div class="custom-button"></div>
        </template>
      </van-slider>
      <div class="flex_between customer_audio_style">
        <div>{{audioPlayCurrentTime}}</div>
        <div>{{audioPlayDurationTime ==='NaN:NaN' ?'00:00':audioPlayDurationTime}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MAudioPlayerModel",
    data(){
      return{
        H:202,
      }
    },
    props: {
      audioPlayCurrentTime: {
        type: String,
        default: '0:00',
      },
      audioPlayDurationTime: {
        type: String,
        default: "00:00",
      },
      getVideoData: {
        type: Object,
        default: () => ({})
      },
      isPlayAudio: {
        type: Boolean,
        default: true
      },
      audioPercentage: {
        type: Number,
        default: 0
      }
    },
    mounted() {
      this.H = document.documentElement.clientWidth * 9 / 16;
    },
    methods: {
      touchEvent(data) {
        this.$emit('touchEvent', data)
      },
      startPlayAudio() {
        this.$emit('startPlayAudio')
      }
    }
  }
</script>

<style scoped>
  .audio_bg {
    width: 100vw;
    position: relative;
  }

  .function_area {
    position: absolute;
    bottom: 2%;
    width: 92%;
    left: calc((100% - 92%) / 2);
  }

  .status_audio {
    position: absolute;
    bottom: 50%;
    width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    margin-bottom: -25px;
  }

  .status_audio img {
    width: 100%;
  }

  .custom-button {
    color: white;
    background: #1989fa;
    font-size: 10px;
    border-radius: 25px;
    padding: 0px 4px;
    height: 14px;
    text-align: center;
    line-height: 14px;
  }

  .customer_audio_style {
    color: white;
    font-size: 10px;
    margin-top: 5px;
  }
</style>
